<template>
  <div class="dashboard">
    <h2 class="page-title">FreePortal 数据概览</h2>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-info">
              <div class="stats-label">车位数据收 (元)</div>
              <div class="stats-value">54,658.36</div>
            </div>
            <div class="stats-icon building">
              <el-icon><OfficeBuilding /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-info">
              <div class="stats-label">入驻企业总数 (个)</div>
              <div class="stats-value">5</div>
            </div>
            <div class="stats-icon business">
              <el-icon><TrendCharts /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-info">
              <div class="stats-label">月卡车辆总数 (辆)</div>
              <div class="stats-value">5</div>
            </div>
            <div class="stats-icon car">
              <el-icon><Van /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-info">
              <div class="stats-label">一体化总数 (台)</div>
              <div class="stats-value">48</div>
            </div>
            <div class="stats-icon integration">
              <el-icon><Monitor /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <el-card class="quick-entry-card">
      <template #header>
        <span>快捷入口</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="6" v-for="entry in quickEntries" :key="entry.title">
          <div class="quick-entry-item" @click="handleQuickEntry(entry.path)">
            <div class="entry-icon" :class="entry.class">
              <el-icon>
                <component :is="entry.icon" />
              </el-icon>
            </div>
            <div class="entry-title">{{ entry.title }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 图表和表格 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <span>车库收入统计</span>
          </template>
          <div ref="chartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="info-card">
          <template #header>
            <span>设备告警流水</span>
          </template>
          <div class="legend">
            <span class="legend-item">
              <span class="legend-dot normal"></span>
              停车场
            </span>
            <span class="legend-item">
              <span class="legend-dot warning"></span>
              行车收入
            </span>
          </div>
          <div class="more-link">
            <el-button type="primary" link>更多 ></el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 临期合同提醒表格 -->
    <el-card class="table-card">
      <template #header>
        <span>临期合同提醒</span>
      </template>
      <el-table :data="contractData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="companyName" label="企业名称" />
        <el-table-column prop="rentBuilding" label="租赁楼宇" />
        <el-table-column prop="rentTime" label="租赁时间" />
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button type="primary" link>查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="empty-state" v-if="contractData.length === 0">
        <el-icon class="empty-icon"><DocumentCopy /></el-icon>
        <p>暂无数据</p>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()

const quickEntries = ref([
  { title: '添加企业', icon: 'Plus', class: 'add-company', path: '/park/enterprise' },
  { title: '员工管理', icon: 'User', class: 'employee', path: '/system/employee' },
  { title: '添加账单', icon: 'DocumentAdd', class: 'add-bill', path: '/property' },
  { title: '数据大屏', icon: 'DataAnalysis', class: 'data-screen', path: '/dashboard' }
])

const contractData = ref([])

const handleQuickEntry = (path: string) => {
  console.log('导航到:', path)
}

const initChart = () => {
  if (!chartRef.value) return

  const chart = echarts.init(chartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['停车场', '行车收入'],
      bottom: 10,
      textStyle: {
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月'],
      axisLine: {
        lineStyle: {
          color: '#e0e6ed'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      max: 8000,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#f0f2f5'
        }
      }
    },
    series: [
      {
        name: '停车场',
        type: 'bar',
        data: [3800, 3800, 3800, 3800, 3800, 3800, 3800, 3800, 3800, 3800, 3800, 3800],
        itemStyle: {
          color: '#5470c6',
          borderRadius: [2, 2, 0, 0]
        },
        barWidth: 20
      },
      {
        name: '行车收入',
        type: 'bar',
        data: [0, 0, 0, 0, 0, 0, 6800, 0, 0, 0, 0, 0],
        itemStyle: {
          color: '#91cc75',
          borderRadius: [2, 2, 0, 0]
        },
        barWidth: 20
      }
    ]
  }

    chart.setOption(option)

  // 响应式调整
  const resizeHandler = () => {
    chart.resize()
  }

  window.addEventListener('resize', resizeHandler)

  // 组件卸载时移除监听器
  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler)
    chart.dispose()
  })
}

onMounted(async () => {
  await nextTick()
  initChart()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 100px);
}

.page-title {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 24px;
  font-weight: bold;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.stats-info {
  flex: 1;
}

.stats-label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 8px;
}

.stats-value {
  color: #303133;
  font-size: 28px;
  font-weight: bold;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stats-icon.building {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-icon.business {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stats-icon.car {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-icon.integration {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.quick-entry-card {
  margin-bottom: 20px;
}

.quick-entry-item {
  text-align: center;
  cursor: pointer;
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s;
}

.quick-entry-item:hover {
  background-color: #f5f7fa;
}

.entry-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 20px;
  color: white;
}

.entry-icon.add-company {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.entry-icon.employee {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.entry-icon.add-bill {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.entry-icon.data-screen {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.entry-title {
  font-size: 14px;
  color: #606266;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 350px;
  width: 100%;
  min-width: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-container {
    height: 300px;
  }

  .stats-row .el-col {
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 0 10px;
  }

  .chart-container {
    height: 250px;
  }

  .page-title {
    font-size: 20px;
  }
}

.info-card {
  margin-bottom: 20px;
  height: 418px;
}

.legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.legend-dot.normal {
  background-color: #5470c6;
}

.legend-dot.warning {
  background-color: #91cc75;
}

.more-link {
  text-align: center;
  margin-top: 200px;
}

.table-card {
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 10px;
}
</style>
